<template>
  <div class="loginbox">
    <!-- 背景 -->
    <img src="@/images/homebj.png" alt="" class="loginbj" />
    <!-- logo -->
    <img src="@/images/loginicon.png" alt="" class="loginicon" />
    <!-- 标题 -->
    <img src="@/images/logintitle.png" alt="" class="logintitle" />
    <!-- 人头 -->
    <img src="@/images/loginre.png" alt="" class="loginren" />
    <!-- 首次选择 -->
    <div class="choicebox">
      <div class="choiceitem" @click="taskid = 1">
        <div class="tool choiceitembox">
          <img
            src="@/images/choicebj.png"
            alt=""
            v-if="taskid != 1"
            class="normal choiceitemimg"
          />
          <img
            src="@/images/choicebjac.png"
            alt=""
            v-if="taskid != 1"
            class="active choiceitemimg"
          />
          <img
            src="@/images/choicebjac.png"
            alt=""
            class="choiceitemimg"
            v-if="taskid == 1"
          />
          <img src="@/images/choince1icon.png" alt="" class="choince1icon" />
        </div>
        <img src="@/images/choince1.png" alt="" class="choince1" />
      </div>
      <div class="choiceitem choiceitem2" @click="taskid = 2">
        <div class="tool choiceitembox">
          <img
            src="@/images/choicebj.png"
            alt=""
            class="normal choiceitemimg"
            v-if="taskid != 2"
          />
          <img
            src="@/images/choicebjac.png"
            alt=""
            class="active choiceitemimg"
            v-if="taskid != 2"
          />
          <img
            src="@/images/choicebjac.png"
            alt=""
            class="choiceitemimg"
            v-if="taskid == 2"
          />

          <img src="@/images/choince2icon.png" alt="" class="choince2icon" />
        </div>
        <img src="@/images/choince2.png" alt="" class="choince2" />
      </div>
      <div class="choiceitem" @click="taskid = 3">
        <div class="tool choiceitembox">
          <img
            src="@/images/choicebj.png"
            alt=""
            class="normal choiceitemimg"
            v-if="taskid != 3"
          />
          <img
            src="@/images/choicebjac.png"
            alt=""
            class="active choiceitemimg"
            v-if="taskid != 3"
          />
          <img
            src="@/images/choicebjac.png"
            alt=""
            class="choiceitemimg"
            v-if="taskid == 3"
          />
          <img src="@/images/choince3icon.png" alt="" class="choince3icon" />
        </div>
        <img src="@/images/choince3.png" alt="" class="choince3" />
      </div>
    </div>
    <!-- 二次确定 -->
    <div class="startbox tool" @click="start">
      <img src="@/images/loginstartbj.png" alt="" class="startboximg normal" />
      <img
        src="@/images/loginstartbjac.png"
        alt=""
        class="startboximg active"
      />
      <img src="@/images/homeqdac.png" alt="" class="starttextimg normal" />
      <img src="@/images/homeqd.png" alt="" class="starttextimg active" />
    </div>
    <!-- 右上角语音控制模块 -->
    <HeadMain :leftshow="leftshow" />
  </div>
</template>

<script>
  import HeadMain from '@/components/headMain.vue';

  export default {
    name: 'WorkspaceJsonLoaDing',
    components: {
      HeadMain,
    },
    data() {
      return {
        leftshow: true,
        taskid: 0,
      };
    },

    mounted() {},

    methods: {
      start() {
        if (this.taskid == 1) {
          this.$router.push({
            name: 'index',
          });
        }
        // 在组件的方法或生命周期中
        if (this.taskid === 2) {
          // 直接修改window.location.href跳转到外部链接
          window.location.href =
            'http://192.168.1.100/vue/ct_station/#/fullscreen/fictitiousdetail?vrResourceId=766';
        }
        if (this.taskid == 3) {
          window.location.href =
            'http://192.168.1.100/vue/ct_station/#/fullscreen/fictitiousdetail?vrResourceId=767';
        }
      },
    },
  };
</script>

<style scoped>
  .loginbox {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .loginbj {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .startbox {
    position: absolute;
    right: 68px;
    bottom: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .startboximg {
    width: 200px;
    height: 82px;
  }
  .starttextimg {
    width: 84px;
    height: 27px;
    position: absolute;
    top: 24px;
  }
  .choicebox {
    display: flex;
    position: absolute;
    top: 150px;
    left: 0px;
    width: 100%;
    justify-content: space-around;
  }
  .choinceitem {
    display: flex;
    flex-direction: column;
    cursor: pointer;
  }
  .choiceitembox {
    position: relative;
  }
  .choince1 {
    width: 199px;
    height: 32px;
    margin: 10px auto;
    display: block;
    cursor: pointer;
  }
  .choince2 {
    width: 238px;
    height: 32px;
    margin: 10px auto;
    display: block;
    cursor: pointer;
  }
  .choince3 {
    width: 301px;
    height: 32px;
    margin: 10px auto;
    display: block;
    cursor: pointer;
  }
  .choince1icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 176px;
    height: 148px;
  }
  .choince2icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 132px;
    height: 152px;
  }
  .choince3icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 136px;
    height: 146px;
  }
  .choiceitem2 {
    position: absolute;
    margin-top: 200px;
  }
  .choiceitemimg {
    width: 284px;
    height: 320px;
  }
</style>
